<script setup>
import { onBeforeMount, ref, onMounted, watch } from "vue";
import * as echarts from "echarts";
import { theme } from "../assets/js/theme.js";
import { getAllEmission, getYears } from "../api/index.js";

const emit = defineEmits(["yearChange"]);

var years = ref([]);
var allEmission = ref([]);

var myChart;
var option = {
  grid: {
    top: "0%",
    // 隐藏图像内容
    height: 0,

    left: "5%",
    right: "15%",
  },
  dataZoom: [
    {
      type: "slider",
      show: true,
      start: 0,
      end: 100,
      height: "88%",
      // borderColor: "white",
      // 选择器位置
      // bottom: "10%",
      // left:'5%',
      dataBackground: {
        areaStyle: {
          color: "#dd6b66",
          shadowColor: "#ea7e53",
        },
      },
      handleIcon:
        "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
      // 两侧手柄大小
      handleSize: "80%",
      handleStyle: {
        color: "#ea7e53",
        borderWidth: 1,
      },
      textStyle: {
        color: "black",
      },
    },
  ],
  xAxis: {
    // 隐藏坐标轴
    show: false,
    type: "category",
    boundaryGap: false,
  },
  yAxis: {
    show: false,
  },
  series: [],
};
var timer = ref(null);
var start = ref("1997");
var end = ref("2019");

async function doHttpGetData() {
  let result = await getYears();
  years.value = result;

  result = await getAllEmission();
  allEmission.value = result;
}

let yearChange = () => {
  console.log("beginYear", start.value);
  console.log("endYear", end.value);
  let value = ref([start.value, end.value]);
  emit("yearChange", value.value);
};

watch(
  () => [start.value, end.value],
  () => {
    if (timer.value) {
      clearTimeout(timer.value);
    }
    timer.value = setTimeout(() => {
      yearChange();
    }, 300);
  }
);

onMounted(async () => {
  await doHttpGetData();

  // console.log("years: ", years.value);
  // console.log("emission: ", allEmission.value);

  myChart = echarts.init(document.getElementById("timeSelector"), theme);
  myChart.setOption(option);
  let optionNew = {
    xAxis: {
      data: years.value,
    },
    series: [
      {
        type: "line",
        stack: "Total",
        smooth: true,
        lineStyle: {
          width: 0,
        },
        showSymbol: false,
        areaStyle: {
          opacity: 0.8,
        },
        data: allEmission.value,
      },
    ],
  };
  myChart.setOption(optionNew);

  myChart.on("datazoom", (params) => {
    // console.log("params: ", params);
    start.value = Math.round(params.start / (100 / 22) + 1997);
    end.value = Math.round(params.end / (100 / 22) + 1997);
  });

  // 下方时间轴
  let yearXAxis = echarts.init(document.getElementById("yearXAxis"), theme);
  let yearOption = {
    grid: {
      top: "1%",

      left: "5.5%",
      right: "14.6%",
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      // nameLocation: 'start'
      nameTextStyle: {
        fontStyle: "normal",
        fontWeight: "normal",
        fontSize: 10,
      },
      axisLabel: {
        // 倾斜效果
        rotate: 20,
        // 显示所有数据
        interval: 0,
      },
      data: years.value,
    },
    yAxis: {
      show: false,
    },
    series: [],
  };
  yearXAxis.setOption(yearOption);
});
</script>

<template>
  <div class="module">
    <div id="timeSelector">
      <!-- <form>
      <input id="inputbeginYear" type="text" pattern="[0-9]{4}" v-model="beginYear" title="请输入大于1997的4位数年份"/> -------
      <input id="inputendYear" type="text" pattern="[0-9]{4}" v-model="endYear" title="请输入小于2019的4位数年份" />
      <button id="submit" @click="submit">确认</button>
      </form> -->
    </div>
    <div id="yearXAxis"></div>
  </div>
</template>

<style lang="scss" scoped>
.module {
  height: 1.3rem;
  // border: 0.0625rem red solid;
  margin: 0.04px;
}
#timeSelector {
  width: 90%;
  height: 70%;
  // input {
  //   height: 89%;
  //   width: 40%;
  //   font-size: 80;
  //   text-align: center;
  //   border: 0;
  // }
  // #submit {
  //   margin-left: 1.5625rem;
  //   height: 17.6px;
  //   width: 22.4px;
  //   border-radius: 15%;
  // }
}
#yearXAxis {
  width: 90%;
  height: 30%;
  z-index: 999;
}
</style>
